"use strict";

/**
 * @auther wtfssd
 * Created by wtfssd on 2017/11/16
 */
import * as React from 'react'

const {View, FlatList, TouchableOpacity, Image} = require('react-native');
const {connect} = require('react-redux');
const NavigationBar = require('react-native-navbar').default;
import {commonProps, commonStyles} from "../../assets/styles/common";
import {categories, products} from "../../assets/data";
import Line from "../../component/Line";
import Colors from "../../assets/styles/Colors";
import MyText from "../../component/MyText";
import {SCREEN_WIDTH} from "../../constant";
import MyIcon from "../../component/icon";
import Request from "../../utils/Request";
import {CategoryItem, ProductItem, ProductManagerProps} from "../../interface/index";

const {Actions} = require("react-native-router-flux");


const {List} = require('antd-mobile');

class ProductManagerPage extends React.Component<ProductManagerProps, any> {


    constructor(props, context: any) {
        super(props);
        this.state = {
            selectedCategory: 0
        }
    }


    componentDidMount(): void {
        // this.props.dispatch({
        //     type: 'product/fetchCategoryList',
        // });
        // if (this.props.product.categoryList.length > 0) {
        //     this.fetchProductList({store_cate_id: this.props.product.categoryList[this.state.selectedCategory].id});
        // }

    }

    fresh = (type: string) => {
        if (type === 'category') {
            this.props.dispatch({
                type: 'product/fetchCategoryList',
            })
        } else {
            if (this.props.product.categoryList.length > 0) {
                this.fetchProductList({store_cate_id: this.props.product.categoryList[this.state.selectedCategory].id});
            } else {
                this.props.dispatch({
                    type: 'product/clear',
                })
            }
        }
    };

    fetchProductList = (props: any) => {
        this.props.dispatch({
            type: 'product/fetchProductList',
            payload: {...props}
        })
    };

    loadMore = () => {
        // this.props.dispatch({
        //     type: 'product/fetchMoreProductList'
        // })
    };

    onCategoryPress = (params: { item: CategoryItem, index: number }) => {
        if (this.state.selectedCategory === params.index) return;
        this.setState({selectedCategory: params.index});
        this.props.dispatch({
            type: 'product/changeSelectedCategoryIndex',
            payload: {index: params.index}
        })
        //
        // this.fetchProductList({store_cate_id: params.item.id});
    };

    renderItem1 = (params: { item: CategoryItem, index: number }) => {
        return (
            <TouchableOpacity onPress={this.onCategoryPress.bind(this, params)}>
                <View key={params.index} style={[commonStyles.centerVH, {paddingVertical: 20}]}>
                    <MyText
                        color={params.index === this.state.selectedCategory ? Colors.Active : Colors.BriefTitle}>{params.item.store_menu}</MyText>
                </View>
                <Line/>
            </TouchableOpacity>

        )
    };

    renderNoData = (tip: string) => {
        return (
            <View style={[commonStyles.flex1, commonStyles.centerVH]}>
                <MyText>{tip}</MyText>
            </View>
        )
    };

    renderItem2 = (params: { item: ProductItem, index: number }) => (
        //
        <TouchableOpacity
            onPress={Actions.addProduct.bind(this, {actionType: 'edit', editProduct: params.item, title: '编辑商品'})}>
            <View style={[commonStyles.flexRow, {padding: 10}]}>

                <Image
                    source={{uri: Request.checkImageUrl(params.item.get_douct_info.preview)}}
                    style={{
                        width: (SCREEN_WIDTH * 0.8 - 5) / 3 - 20, height: (SCREEN_WIDTH * 0.8 - 5) / 3 - 20,
                        backgroundColor: 'red'
                    }}/>
                <View style={[commonStyles.flex1, commonStyles.flexColumn, {
                    justifyContent: 'space-around',
                    marginLeft: 10
                }]}>
                    <MyText>{params.item.get_douct_info.name}</MyText>
                    <MyText>{params.item.get_douct_info.spec}</MyText>
                    <View style={[commonStyles.flexRow, {justifyContent: 'space-between', alignItems: 'center'}]}>
                        <MyText style={{color: Colors.Active, fontSize: 18}}><MyText
                            style={{fontSize: 14}}>¥</MyText>{Number(params.item.get_douct_info.price).toFixed(2)}
                        </MyText>
                        <MyText color={Colors.Extra} fontSize={12}>{`已售  0`}</MyText>
                    </View>
                </View>
            </View>
            <Line/>
        </TouchableOpacity>
    );

    render() {
        return (
            <View style={commonStyles.container}>
                <NavigationBar {...commonProps.navBar}
                               title={{title: this.props.title, tintColor: '#fff'}}
                />

                <TouchableOpacity style={[commonStyles.flexRow, commonStyles.centerVH, {
                    paddingVertical: 5,
                    backgroundColor: Colors.White
                }]}
                                  onPress={Actions.addProduct}>
                    <MyIcon name={'icon-icon19'} color={Colors.Primary} size={34}/>
                    <MyText style={{marginLeft: 10}}>添加商品</MyText>
                </TouchableOpacity>

                <View style={[commonStyles.flex1, commonStyles.flexRow, {marginTop: 10}]}>
                    <View style={{display: 'flex', flex: 0.2, marginRight: 10, backgroundColor: Colors.White}}>
                        <FlatList data={this.props.product.categoryList}
                                  extraData={this.state}
                                  style={{flex: 1}}
                                  onRefresh={this.fresh.bind(this, 'category')}
                                  refreshing={this.props.product.loading}
                                  renderItem={this.renderItem1}
                                  ListEmptyComponent={this.renderNoData.bind(this, '暂无分类')}
                                  keyExtractor={(item, index) => item.id}

                        />
                    </View>
                    <View style={{display: 'flex', flex: 0.8, backgroundColor: Colors.White}}>
                        <FlatList data={this.props.product.productList}
                                  extraData={this.state}
                                  style={{flex: 1}}
                                  onRefresh={this.fresh.bind(this, 'product')}
                                  refreshing={this.props.product.loading}
                                  renderItem={this.renderItem2}
                                  onEndReached={this.loadMore}
                                  ListEmptyComponent={this.renderNoData.bind(this, '暂无商品')}
                                  keyExtractor={(item, index) => item.id}

                        />
                    </View>
                </View>

            </View>

        );
    }
}


export default connect(
    ({auth, product}) => ({auth, product})
)(ProductManagerPage);